<template>
    <div class="wrapper">
        <swiper :options="swiperOptions">
            <swiper-slide v-for="item in swiperList" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        // 这个属性表示支持轮播
        loop: true
      },
      swiperList: [
        {
          id: '0001',
          imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/13723c4cfa90460091a79fae287caf04.jpg_750x200_0bc4cd83.jpg'
        },
        {
          id: '0002',
          imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201911/64d0b9e87e685d864add20d75c81bcc9.jpg_750x200_7a0937d7.jpg'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
    // 样式穿透
    .wrapper >>> .swiper-pagination-bullet-active
        background : #fff !important
    .wrapper
        overflow: hidden
        width : 100%
        height : 0
        padding-bottom : 31.25%
        .swiper-img
            width: 100%
</style>
